<template>
  <div class="person">
    <h1>Watch---reactive!!!</h1>
    <p>特点：监视 reactive定义的【对象类型】数据，默认开启深度监视</p>
    <span>姓名：{{ personMsg.name }}</span>
    <br />
    <span>年龄：{{ personMsg.age }}</span>
    <br />
    <br />
    <button @click="changeName">点我修改名字</button>
    <button @click="changeAge">点我修改年龄</button>
    <button @click="changePerson">点我换人</button>
  </div>
</template>


<script lang="ts" setup name="watch2Ref">
import { watch, reactive } from 'vue'

const personMsg = reactive({
  name: '小淳',
  age: 18
})

function changeName() {
  personMsg.name = '佳静'
}

function changeAge() {
  personMsg.age += 1
}

function changePerson() {
  // reactive有个弊端就是，他不能整体修改数据，如果想要整体修改 reactive 定义的响应式对象，需要用到Object.assign
  Object.assign(personMsg, {
    name: '淳美女',
    age: 18
  })
}

// Watch的第二种用法:监视 reactive定义的【对象类型】数据，默认开启深度监视，并且该深度监视无法关闭
// reactive是隐式创建深层监听的，无论该对象层级有多深，都可以监听到的
// reactive 的修改没有创建新对象，都是在原来数据的基础上去修改的，所以新值旧值都一样，地址值没变
watch(
  personMsg,
  (oldValue, newValue) => {
    console.log(oldValue, newValue)
  },
  // 若想见识对象内部属性的变化，需要手动开启深度监视
  { deep: true, immediate: true }
)
</script>

<style scoped>
.person {
  width: 600px;
  height: 220px;
  border-radius: 5px;
  padding: 10px;
  background-color: pink;
  box-shadow: 0 0 10px;
  padding: 5px;
}
button {
  margin: 6px 6px;
}
</style>
